/**
 * @constructor 浏览器控制台漂亮日志 文件
 * @param { String } - 漂亮日志
 * @param { String } 作者：石小石Orz  - 在线地址： `https://juejin.cn/post/7371716384847364147`
 */

const isProduction = process.env.NODE_ENV === 'production';

const prettyPrint = (title, text, color) => {
  if (isProduction) return;
  console.log(
    `%c ${title} %c ${text} %c`,
    `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
    `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
    'background: #F5E3DE, transparent'
  );
};

const isEmpty = (value) => {
  return value == null || value === undefined || value === '';
};

const prettyLog = {
  /**
   * 基础信息
   * @param {string} textOrTitle 标题
   * @param {*} content 内容
   */
  info(textOrTitle, content = '') {
    const title = isEmpty(content) ? 'Info' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#909399');
  },
  /**
   * 错误信息
   * @param {string} textOrTitle 标题
   * @param {*} content 内容
   * */
  error(textOrTitle, content = '') {
    const title = isEmpty(content) ? 'Error' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#F56C6C');
  },
  /**
   * 警告信息
   * @param {string} textOrTitle 标题
   * @param {*} content 内容
   * */
  warning(textOrTitle, content = '') {
    const title = isEmpty(content) ? 'Warning' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#E6A23C');
  },
  /**
   * 成功信息
   * @param {string} textOrTitle 标题
   * @param {*} content 内容
   * */
  success(textOrTitle, content = '') {
    const title = isEmpty(content) ? 'Success ' : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, '#67C23A');
  },

  table() {
    const data = [
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
      { id: 3, name: 'Charlie', age: 35 }
    ];

    console.log(
      '%c id%c name%c age',
      'color: white; background-color: black; padding: 2px 10px;',
      'color: white; background-color: black; padding: 2px 10px;',
      'color: white; background-color: black; padding: 2px 10px;'
    );

    data.forEach((row) => {
      console.log(
        `%c ${row.id} %c ${row.name} %c ${row.age} `,
        'color: black; background-color: lightgray; padding: 2px 10px;',
        'color: black; background-color: lightgray; padding: 2px 10px;',
        'color: black; background-color: lightgray; padding: 2px 10px;'
      );
    });
  },

  /**
   * 图片打印
   * @param {string} url 图片完整地址
   * @param {number} scale 比例
   * url可以传支持 base64，如果是url链接，图片链接则必须开启了跨域访问才能打印
   * */
  picture(url, scale = 1) {
    if (isProduction) return;
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const c = document.createElement('canvas');
      const ctx = c.getContext('2d');
      if (ctx) {
        c.width = img.width;
        c.height = img.height;
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.drawImage(img, 0, 0);
        const dataUri = c.toDataURL('image/png');

        console.log(
          `%c sup?`,
          `font-size: 1px;
                  padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
                  background-image: url(${dataUri});
                  background-repeat: no-repeat;
                  background-size: ${img.width * scale}px ${img.height * scale}px;
                  color: transparent;
                  `
        );
      }
    };
    img.src = url;
  }
}


export default prettyLog